import React, { Component } from "react";
import { Menu, Layout, Tag, Breadcrumb } from "antd";
import { PieChartOutlined, MailOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import axios from "_axios@0.21.4@axios";

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
// 权限
class Home extends Component {
  state = {
    collapsed: false,
    Breadcrumb: [],
    bread: [],
    pathList: [],
    authName: "",
  };
  componentDidMount() {
    let breakList = JSON.parse(sessionStorage.getItem("breakList")) || [];
    let bread = JSON.parse(sessionStorage.getItem("bread")) || [];
    let authName = window.sessionStorage.getItem("authName");
    this.setState({
      Breadcrumb: breakList,
      bread,
      authName,
    });
    this.getPath();
  }
  getPath() {
    axios
      .get(`/path?username=${window.sessionStorage.getItem("auth")}`)
      .then((res) => {
        this.setState({
          pathList: res.data[1][0].children,
        });
        console.log(this.state.pathList);
      });
  }
  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  selectSub = (e) => {
    let tar = e.target;

    if (tar.className === "ant-menu-title-content") {
      let list = sessionStorage.getItem("break") || [];
      let inner = tar.parentNode.parentNode.parentNode.previousElementSibling
        .children[1]
        ? tar.parentNode.parentNode.parentNode.previousElementSibling
            .children[1].innerHTML
        : "";
      list.push(inner);
      list.push(e.target.innerHTML);
      this.setState({
        bread: list,
      });
    } else if (tar.nodeName === "A") {
      if (tar.innerHTML !== "工作台") {
        let bread = sessionStorage.getItem("break") || [];
        let grandPa = tar.parentNode.parentNode.parentNode.parentNode.parentNode
          .previousElementSibling.children[1]
          ? tar.parentNode.parentNode.parentNode.parentNode.parentNode
              .previousElementSibling.children[1].innerHTML
          : "";
        let parent = tar.parentNode.parentNode.parentNode.previousElementSibling
          .children[1].innerHTML
          ? tar.parentNode.parentNode.parentNode.previousElementSibling
              .children[1].innerHTML
          : tar.parentNode.parentNode.parentNode.previousElementSibling
              .children[0].innerHTML;
        let self = tar.innerHTML;
        if (grandPa) {
          bread.push(grandPa);
          bread.push(parent);
          bread.push(self);
          this.setState(
            {
              bread,
            },
            () => {
              sessionStorage.setItem("bread", JSON.stringify(this.state.bread));
            }
          );
        } else {
          bread.push(parent);
          bread.push(self);

          this.setState(
            {
              bread,
            },
            () => {
              sessionStorage.setItem("bread", JSON.stringify(this.state.bread));
            }
          );
        }
      } else {
        let list = [];
        list.push(tar.innerHTML);
        this.setState(
          {
            bread: list,
          },
          () => {
            sessionStorage.setItem("bread", JSON.stringify(this.state.bread));
          }
        );
      }

      let url = tar.getAttribute("href");
      let title = tar.innerHTML;
      let obj = {
        url,
        title,
      };
      this.props.dispatch({
        type: "Breadcrumb",
        payload: obj,
      });
      let breakList = JSON.parse(sessionStorage.getItem("breakList")) || [];

      let index = breakList.findIndex((item) => item.url === url);

      if (index === -1) {
        if (breakList.length >= 5) {
          breakList.splice(0, 1);
        }
        breakList.push({ ...obj });
      } else {
        breakList.splice(index, 1);
        breakList.push({ ...obj });
      }
      sessionStorage.setItem("breakList", JSON.stringify(breakList));
      this.setState({
        Breadcrumb: breakList,
      });
    }
  };
  log(v) {
    let breakList = JSON.parse(sessionStorage.getItem("breakList")) || [];

    let index = breakList.findIndex((item) => item.url === v.url);

    breakList.splice(index, 1);

    if (!breakList.length) {
      this.props.history.push("/home/welcome");
      window.location.reload();
      localStorage.clear();
      sessionStorage.clear();
    } else {
      if (index > 0) {
        this.props.history.push(breakList[index - 1].url);
      } else {
        window.location.reload();
        this.props.history.push(breakList[breakList.length - 1].url);
      }
    }
    sessionStorage.setItem("breakList", JSON.stringify(breakList));
    this.setState({
      Breadcrumb: breakList,
    });
  }

  render() {
    return (
      <div className="home">
        <Layout>
          <Header
            style={{ color: "white", background: "skyblue", fontSize: "25px" }}
          >
            电商后台管理系统
          </Header>
          <Layout>
            <Sider
              collapsible={true}
              collapsed={this.state.collapsed}
              height="100%"
              onClick={this.selectSub}
            >
              <p onClick={this.toggleCollapsed} className="auth">
                {this.state.authName}
              </p>
              <Menu
                defaultSelectedKeys={["0"]}
                defaultOpenKeys={["1opp"]}
                mode="inline"
                theme="dark"
              >
                {this.state.pathList.map((item) =>
                  item.title ? (
                    item.children ? (
                      <SubMenu
                        key={item.path}
                        icon={<MailOutlined />}
                        title={item.title}
                      >
                        {item.children.map((item2) =>
                          item2.title ? (
                            item2.children ? (
                              <SubMenu
                                key={item2.title}
                                icon={<MailOutlined />}
                                title={item2.title}
                              >
                                {item2.children.map((item3) =>
                                  item3.title ? (
                                    <Menu.Item
                                      key={item3.title}
                                      icon={<PieChartOutlined />}
                                    >
                                      {" "}
                                      <Link to={item3.path}>{item3.title}</Link>
                                    </Menu.Item>
                                  ) : null
                                )}
                              </SubMenu>
                            ) : (
                              <Menu.Item
                                key={item2.title}
                                icon={<PieChartOutlined />}
                              >
                                {" "}
                                <Link to={item2.path}>{item2.title}</Link>
                              </Menu.Item>
                            )
                          ) : null
                        )}
                      </SubMenu>
                    ) : (
                      <Menu.Item key={item.title} icon={<MailOutlined />}>
                        <Link to={item.path}>{item.title}</Link>
                      </Menu.Item>
                    )
                  ) : null
                )}
              </Menu>
            </Sider>
            <Content>
              <div className="tagHeader">
                <Breadcrumb>
                  <Breadcrumb.Item>首页</Breadcrumb.Item>
                  {this.state.bread
                    ? this.state.bread.map((item, index) => (
                        <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>
                      ))
                    : ""}
                </Breadcrumb>
              </div>
              <div className="routeTag">
                <Tag color="magenta">
                  <Link to="/home/welcome">首页</Link>
                </Tag>
                {this.state.Breadcrumb &&
                  this.state.Breadcrumb.map((item, index) => (
                    <Tag
                      closable
                      color="cyan"
                      onClose={() => this.log(item)}
                      key={index}
                    >
                      <Link to={item.url}>{item.title}</Link>
                    </Tag>
                  ))}
              </div>
              <div className="inner">{this.props.children}</div>
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }
}

export default connect()(Home);
